<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import htmldatas from '@/assets/JSON/html.json'
import lianxi from './lianxi.vue'

// 响应式数据
const elements = ref([])
const selectedElementId = ref(null)
const previewMode = ref(false)
const canvas = ref(null)
const selectedCategory = ref(null) // 当前选中的标签分类
let elementIdCounter = 0

// 侧边栏控制
const leftSidebarVisible = ref(true)
const rightSidebarVisible = ref(true)
const leftSidebarWidth = ref(200)
const rightSidebarWidth = ref(200)
const isDraggingLeft = ref(false)
const isDraggingRight = ref(false)

// 计算属性
const selectedElement = computed(() => {
  return elements.value.find(el => el.id === selectedElementId.value)
})

// 源代码计算属性
const elementSourceCode = computed({
  get() {
    if (!selectedElement.value) return ''
    return generateElementHTML(selectedElement.value)
  },
  set(newValue) {
    // 这里可以添加解析HTML的逻辑
    console.log('源代码更新:', newValue)
  }
})

// 创建新元素
const createElement = (tagData, x = 50, y = 50) => {
  const newElement = {
    id: ++elementIdCounter,
    tag: tagData.tag,
    content: getDefaultContent(tagData.tag),
    x: x,
    y: y,
    width: 'auto',
    height: 'auto',
    backgroundColor: '#ffffff',
    color: '#000000',
    editing: false
  }
  elements.value.push(newElement)
  selectedElementId.value = newElement.id
  return newElement
}

// 获取默认内容   
const getDefaultContent = (tag) => {
  const defaults = {
    'p': '这是一个段落',
    'h1': '这是标题1',
    'h2': '这是标题2',
    'span': '行内文本',
    'div': '容器内容',
    'button': '按钮',
    'input': '',
    'section': '章节内容',
    'article': '文章内容',
    'header': '头部内容',
    'select': '下拉选项'
  }
  return defaults[tag] || '新元素'
}

// 选择元素
const selectElement = (elementId = null) => {
  selectedElementId.value = elementId
}

// 编辑元素
const editElement = (elementId) => {
  const element = elements.value.find(el => el.id === elementId)
  if (element) {
    element.editing = true
    nextTick(() => {
      const editableEl = document.querySelector(`[data-element-id="${elementId}"] .editable-content`)
      if (editableEl) {
        editableEl.focus()
      }
    })
  }
}

// 完成编辑
const finishEditing = (elementId) => {
  const element = elements.value.find(el => el.id === elementId)
  if (element) {
    element.editing = false
  }
}

// 保存元素内容
const saveElementContent = (elementId, event) => {
  const element = elements.value.find(el => el.id === elementId)
  if (element) {
    element.content = event.target.textContent
    element.editing = false
  }
}

// 删除元素
const deleteElement = (elementId) => {
  const index = elements.value.findIndex(el => el.id === elementId)
  if (index > -1) {
    elements.value.splice(index, 1)
    if (selectedElementId.value === elementId) {
      selectedElementId.value = null
    }
  }
}

// 处理分类选择
const handleCategorySelect = (categoryKey) => {
  if (selectedCategory.value === categoryKey) {
    selectedCategory.value = null // 如果点击的是当前选中的分类，则收起
  } else {
    selectedCategory.value = categoryKey // 否则展开该分类
  }
}

// 处理标签选择
const handleTagSelect = (tagData) => {
  // 在画布中心创建新元素
  const canvasRect = canvas.value?.getBoundingClientRect()
  const x = canvasRect ? canvasRect.width / 2 - 50 : 100
  const y = canvasRect ? canvasRect.height / 2 - 25 : 100
  createElement(tagData, x, y)
}

// 复制元素
const duplicateElement = (elementId) => {
  const element = elements.value.find(el => el.id === elementId)
  if (element) {
    const newElement = {
      ...element,
      id: ++elementIdCounter,
      x: element.x + 20,
      y: element.y + 20
    }
    elements.value.push(newElement)
    selectedElementId.value = newElement.id
  }
}

// 更新元素
const updateElement = () => {
  // 触发响应式更新
}

// 生成元素HTML源代码
const generateElementHTML = (element) => {
  if (!element) return ''

  const { tag, content, width, height, backgroundColor, color } = element

  // 构建样式字符串
  const styles = []
  if (width !== 'auto') styles.push(`width: ${width}px`)
  if (height !== 'auto') styles.push(`height: ${height}px`)
  if (backgroundColor !== '#ffffff') styles.push(`background-color: ${backgroundColor}`)
  if (color !== '#000000') styles.push(`color: ${color}`)

  const styleAttr = styles.length > 0 ? ` style="${styles.join('; ')}"` : ''

  // 自闭合标签
  const selfClosingTags = ['input', 'img', 'br', 'hr', 'meta', 'link']
  if (selfClosingTags.includes(tag)) {
    return `<${tag}${styleAttr} />`
  }

  // 普通标签
  return `<${tag}${styleAttr}>${content}</${tag}>`
}

// 从源代码更新元素
const updateElementFromSource = (event) => {
  const sourceCode = event.target.value
  if (!selectedElement.value || !sourceCode.trim()) return

  try {
    // 简单的HTML解析（这里可以使用更复杂的解析器）
    const parser = new DOMParser()
    const doc = parser.parseFromString(sourceCode, 'text/html')
    const parsedElement = doc.body.firstElementChild

    if (parsedElement) {
      const element = selectedElement.value

      // 更新标签类型
      element.tag = parsedElement.tagName.toLowerCase()

      // 更新内容
      element.content = parsedElement.textContent || ''

      // 更新样式
      const style = parsedElement.style
      if (style.width) {
        element.width = parseInt(style.width) || 'auto'
      }
      if (style.height) {
        element.height = parseInt(style.height) || 'auto'
      }
      if (style.backgroundColor) {
        element.backgroundColor = style.backgroundColor
      }
      if (style.color) {
        element.color = style.color
      }
    }
  } catch (error) {
    console.error('解析HTML源代码失败:', error)
  }
}

// 获取元素样式
const getElementStyle = (element) => {
  return {
    position: 'absolute',
    left: element.x + 'px',
    top: element.y + 'px',
    width: element.width !== 'auto' ? element.width + 'px' : 'auto',
    height: element.height !== 'auto' ? element.height + 'px' : 'auto',
    backgroundColor: element.backgroundColor,
    color: element.color,
    padding: '8px',
    border: selectedElementId.value === element.id ? '2px solid #58a6ff' : '1px solid #333',
    borderRadius: '4px',
    cursor: previewMode.value ? 'default' : 'pointer'
  }
}

// 清空画布
const clearCanvas = () => {
  if (confirm('确定要清空画布吗？')) {
    elements.value = []
    selectedElementId.value = null
  }
}

// 导出HTML
const exportHTML = () => {
  let html = '<!DOCTYPE html>\n<html>\n<head>\n  <title>导出的页面</title>\n</head>\n<body>\n'

  elements.value.forEach(element => {
    const style = `position: absolute; left: ${element.x}px; top: ${element.y}px; background-color: ${element.backgroundColor}; color: ${element.color}; padding: 8px;`
    html += `  <${element.tag} style="${style}">${element.content}</${element.tag}>\n`
  })

  html += '</body>\n</html>'

  const blob = new Blob([html], { type: 'text/html' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'exported-page.html'
  a.click()
  URL.revokeObjectURL(url)
}

// 拖拽功能实现
const setupDragAndDrop = () => {
  // 拖拽开始事件
  const handleDragStart = (e) => {
    const tagData = {
      tag: e.target.dataset.tag,
      name: e.target.querySelector('.tag-name').textContent,
      desc: e.target.querySelector('.tag-desc').textContent
    }
    e.dataTransfer.setData('text/plain', JSON.stringify(tagData))
    e.target.style.opacity = '0.5'
  }

  // 拖拽结束事件
  const handleDragEnd = (e) => {
    e.target.style.opacity = '1'
  }

  // 为所有可拖拽标签添加事件监听
  const draggableTags = document.querySelectorAll('.draggable-tag')
  draggableTags.forEach(tag => {
    tag.addEventListener('dragstart', handleDragStart)
    tag.addEventListener('dragend', handleDragEnd)
  })

  // 为画布添加拖放事件
  const canvasEl = canvas.value
  if (canvasEl) {
    canvasEl.addEventListener('dragover', (e) => {
      e.preventDefault()
      canvasEl.style.backgroundColor = '#111'
    })

    canvasEl.addEventListener('dragleave', () => {
      canvasEl.style.backgroundColor = '#000'
    })

    canvasEl.addEventListener('drop', (e) => {
      e.preventDefault()
      canvasEl.style.backgroundColor = '#000'

      try {
        const tagData = JSON.parse(e.dataTransfer.getData('text/plain'))
        const rect = canvasEl.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top

        createElement(tagData, x, y)

        // 显示成功提示
        const notification = document.createElement('div')
        notification.textContent = `已添加 ${tagData.name} 标签`
        notification.style.cssText = `
          position: fixed;
          top: 20px;
          right: 20px;
          background: #58a6ff;
          color: white;
          padding: 10px 15px;
          border-radius: 5px;
          z-index: 1000;
          font-size: 14px;
        `
        document.body.appendChild(notification)

        setTimeout(() => {
          document.body.removeChild(notification)
        }, 2000)

      } catch (error) {
        console.error('解析拖放数据失败:', error)
      }
    })
  }
}

// 侧边栏控制方法
const toggleLeftSidebar = () => {
  leftSidebarVisible.value = !leftSidebarVisible.value
}

const toggleRightSidebar = () => {
  rightSidebarVisible.value = !rightSidebarVisible.value
}

// 左侧边栏拖拽开始
const startDragLeft = (e) => {
  isDraggingLeft.value = true
  const startX = e.clientX
  const startWidth = leftSidebarWidth.value

  const handleMouseMove = (e) => {
    const deltaX = e.clientX - startX
    const newWidth = Math.max(150, Math.min(400, startWidth + deltaX))
    leftSidebarWidth.value = newWidth
  }

  const handleMouseUp = () => {
    isDraggingLeft.value = false
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }

  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

// 右侧边栏拖拽开始
const startDragRight = (e) => {
  isDraggingRight.value = true
  const startX = e.clientX
  const startWidth = rightSidebarWidth.value

  const handleMouseMove = (e) => {
    const deltaX = startX - e.clientX
    const newWidth = Math.max(150, Math.min(400, startWidth + deltaX))
    rightSidebarWidth.value = newWidth
  }

  const handleMouseUp = () => {
    isDraggingRight.value = false
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }

  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

// 组件挂载后初始化拖拽功能
onMounted(() => {
  nextTick(() => {
    setupDragAndDrop()
  })
})
</script>

<template>

  <!-- 容器 -->
  <el-container>
    <!-- 顶部区域 - HTML标签工具栏 -->
    <el-header class="top-header">
      <div class="header-content">
        <div class="tag-toolbar">
          <!-- HTML标签选择器 -->
          <div class="tag-selector-container">
            <span class="toolbar-title">HTML标签工具栏</span>
            <div class="tag-categories">
              <!-- 文本语义标签 -->
              <el-button type="primary" size="small" :class="{ 'active': selectedCategory === 'TextSemantics' }"
                @click="handleCategorySelect('TextSemantics')">
                {{ htmldatas.HTML.TextSemantics.C_N }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>

              <!-- 内容容器标签 -->
              <el-button type="primary" size="small" :class="{ 'active': selectedCategory === 'ContentContainers' }"
                @click="handleCategorySelect('ContentContainers')">
                {{ htmldatas.HTML.ContentContainers.C_N }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>

              <!-- 表单组件标签 -->
              <el-button type="primary" size="small" :class="{ 'active': selectedCategory === 'FormComponents' }"
                @click="handleCategorySelect('FormComponents')">
                {{ htmldatas.HTML.FormComponents.C_N }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>

              <!-- 语义化布局标签 -->
              <el-button type="primary" size="small" :class="{ 'active': selectedCategory === 'SemanticLayout' }"
                @click="handleCategorySelect('SemanticLayout')">
                {{ htmldatas.HTML.SemanticLayout.C_N }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>

              <!-- 列表系统标签 -->
              <el-button type="primary" size="small" :class="{ 'active': selectedCategory === 'ListSystems' }"
                @click="handleCategorySelect('ListSystems')">
                {{ htmldatas.HTML.ListSystems.C_N }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>

              <!-- 媒体元素标签 -->
              <el-button type="primary" size="small" :class="{ 'active': selectedCategory === 'MediaElements' }"
                @click="handleCategorySelect('MediaElements')">
                {{ htmldatas.HTML.MediaElements.C_N }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
            </div>
          </div>
        </div>

        <!-- 标签展示行 -->
        <div v-if="selectedCategory" class="tag-display-row">
          <div class="tag-items">
            <div v-for="item in htmldatas.HTML[selectedCategory].detail" :key="item.tag" class="draggable-tag"
              draggable="true" :data-tag="item.tag" @click="handleTagSelect(item)">
              <span class="tag-name">&lt;{{ item.tag }}&gt;</span>
              <span class="tag-desc">{{ item.description }}</span>
            </div>
          </div>
        </div>
      </div>
      <lianxi></lianxi>
    </el-header>

    <el-container>
      <!-- 左侧边栏控制按钮 -->
      <div class="sidebar-toggle left-toggle" @click="toggleLeftSidebar">
        <i :class="leftSidebarVisible ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
      </div>
      
      <!-- 左侧边栏 -->
      <el-aside v-if="leftSidebarVisible" :width="leftSidebarWidth + 'px'" class="left-sidebar">
        <div class="sidebar-content">
          <div class="sidebar-header">
            <h3>左侧面板</h3>
            <button class="close-btn" @click="toggleLeftSidebar">×</button>
          </div>
          <p>这里可以放置导航菜单、工具栏或其他功能组件</p>
        </div>
        <!-- 拖拽手柄 -->
        <div class="resize-handle right" @mousedown="startDragLeft" :class="{ 'dragging': isDraggingLeft }"></div>
      </el-aside>

      <!-- 中间主要内容区域 - 可视化编辑器 -->
      <el-main class="main-content">
        <div class="editor-header">
          <h2>可视化HTML编辑器</h2>
          <div class="editor-controls">
            <button class="control-btn" @click="clearCanvas">清空画布</button>
            <button class="control-btn" @click="exportHTML">导出HTML</button>
            <button class="control-btn" @click="previewMode = !previewMode">
              {{ previewMode ? '编辑模式' : '预览模式' }}
            </button>
          </div>
        </div>

        <div class="editor-canvas" :class="{ 'preview-mode': previewMode }" @click="selectElement" ref="canvas">
          <div v-if="elements.length === 0" class="canvas-placeholder">
            <div class="placeholder-content">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 1 2 2h12a2 2 0 0 1 2-2V7.5L14.5 2z" />
                <polyline points="14,2 14,8 20,8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
                <polyline points="10,9 9,9 8,9" />
              </svg>
              <p>从顶部拖拽HTML标签到这里开始创建页面</p>
            </div>
          </div>

          <div v-for="(element) in elements" :key="element.id"
            :class="['canvas-element', { 'selected': selectedElementId === element.id }]"
            @click.stop="selectElement(element.id)" @dblclick="editElement(element.id)"
            :style="getElementStyle(element)">
            <component :is="element.tag" :contenteditable="element.editing"
              @blur="saveElementContent(element.id, $event)" @keydown.enter.prevent="finishEditing(element.id)"
              class="editable-content">
              {{ element.content }}
            </component>

            <div v-if="selectedElementId === element.id && !previewMode" class="element-controls">
              <button @click.stop="editElement(element.id)" class="edit-btn">编辑</button>
              <button @click.stop="deleteElement(element.id)" class="delete-btn">删除</button>
              <button @click.stop="duplicateElement(element.id)" class="duplicate-btn">复制</button>
            </div>
          </div>
        </div>
      </el-main>

      <!-- 右侧边栏控制按钮 -->
      <div class="sidebar-toggle right-toggle" @click="toggleRightSidebar">
        <i :class="rightSidebarVisible ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i>
      </div>
      
      <!-- 右侧边栏 -->
      <el-aside v-if="rightSidebarVisible" :width="rightSidebarWidth + 'px'" class="right-sidebar">
        <!-- 拖拽手柄 -->
        <div class="resize-handle left" @mousedown="startDragRight" :class="{ 'dragging': isDraggingRight }"></div>
        
        <!-- 属性编辑面板 -->
        <div v-if="selectedElement && !previewMode" class="properties-panel">
          <div class="sidebar-header">
            <h3>元素属性</h3>
            <button class="close-btn" @click="toggleRightSidebar">×</button>
          </div>
          <div class="property-group">
            <label>标签类型:</label>
            <span class="tag-display">&lt;{{ selectedElement.tag }}&gt;</span>
          </div>
          <div class="property-group">
            <label>内容:</label>
            <input v-model="selectedElement.content" @input="updateElement" class="property-input">
          </div>
          <div class="property-group">
            <label>宽度px:</label>
            <input v-model="selectedElement.width" @input="updateElement" class="property-input" placeholder="auto">
          </div>
          <div class="property-group">
            <label>高度px:</label>
            <input v-model="selectedElement.height" @input="updateElement" class="property-input" placeholder="auto">
          </div>
          <div class="property-group">
            <label>背景色:</label>
            <input v-model="selectedElement.backgroundColor" @input="updateElement" type="color" class="color-input">
          </div>
          <div class="property-group">
            <label>文字颜色:</label>
            <input v-model="selectedElement.color" @input="updateElement" type="color" class="color-input">
          </div>

          <!-- 源代码编辑区域 -->
          <div class="property-group source-code-group">
            <label>源代码:</label>
            <textarea v-model="elementSourceCode" @input="updateElementFromSource" class="source-code-input"
              placeholder="HTML源代码" rows="8"></textarea>
          </div>
        </div>

        <!-- 默认内容 -->
        <div v-else class="sidebar-default">
          <div class="sidebar-header">
            <h3>属性面板</h3>
            <button class="close-btn" @click="toggleRightSidebar">×</button>
          </div>
          <p>选择画布中的元素来编辑其属性</p>
        </div>
      </el-aside>
    </el-container>
  </el-container>
</template>

<style scoped>
.home-layout {
  height: 100vh;
  display: grid;
  grid-template-areas:
    "header header header"
    "left main right";
  grid-template-columns: 240px 1fr 280px;
  grid-template-rows: auto 1fr;
  background-color: #000;
}

/* 顶部区域 - HTML标签工具栏 */
.top-header {
  grid-area: header;
  background-color: #ffffff;
  border-bottom: 2px solid #333;
  padding: 0;
  height: auto;
  min-height: 70px;
}

.header-content {
  background: linear-gradient(to bottom, #2a2a2a, #1e1e1e);
  padding: 0 24px;
}

.tag-toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 70px;
}

.tag-selector-container {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.toolbar-title {
  color: #58a6ff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.tag-categories {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dropdown-tag-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.dropdown-tag-item .tag-name {
  font-family: 'Courier New', monospace;
  color: #58a6ff;
  font-weight: 600;
  font-size: 13px;
}

.dropdown-tag-item .tag-desc {
  color: #8b949e;
  font-size: 12px;
  line-height: 1.3;
}

/* 标签展示行 */
.tag-display-row {
  background-color: #f1f1f1;
  border-top: 1px solid #333;
}

.tag-items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.draggable-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #21262d, #161b22);
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 10px 8px;
  cursor: grab;
  transition: all 0.2s ease;
  min-width: 70px;
  user-select: none;
}

.draggable-tag:hover {
  background: linear-gradient(135deg, #30363d, #21262d);
  border-color: #58a6ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.draggable-tag:active {
  cursor: grabbing;
  transform: translateY(0);
}

.draggable-tag .tag-name {
  color: #f85149;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
}

.draggable-tag .tag-desc {
  color: #8b949e;
  font-size: 10px;
  text-align: center;
  line-height: 1.3;
}

/* 激活状态的按钮 */
.el-button.active {
  background-color: #58a6ff !important;
  border-color: #58a6ff !important;
}

/* 左侧边栏 */
.left-sidebar {
  grid-area: left;
  background-color: #929292;
  border-right: 3px solid #00ffff;
  padding: 16px;
}

/* 右侧边栏 */
.right-sidebar {
  grid-area: right;
  background-color: #000;
  border: 1px solid #333;
  padding: 0;
  color: #fff;
  overflow-y: auto;
}

.sidebar-default {
  padding: 24px;
  text-align: center;
  color: #666;
}

.sidebar-default h3 {
  margin: 0 0 12px 0;
  color: #fff;
  font-size: 16px;
}

.sidebar-default p {
  margin: 0;
  font-size: 14px;
}

/* 主要内容区域 */
.main-content {
  grid-area: main;
  background-color: #818181;
  padding: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 编辑器头部 */
.editor-header {
  background-color: #7f7f7f;
  border-bottom: 1px solid #333;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 60px;
}

.editor-header h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}

.editor-controls {
  display: flex;
  gap: 12px;
}

.control-btn {
  background: linear-gradient(135deg, #333, #555);
  color: #fff;
  border: 1px solid #666;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.control-btn:hover {
  background: linear-gradient(135deg, #444, #666);
  transform: translateY(-1px);
}

.control-btn:active {
  transform: translateY(0);
}

/* 编辑器画布 */
.editor-canvas {
  flex: 1;
  background-color: #d3d3d3;
  position: relative;
  overflow: auto;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 600px;
}

.editor-canvas.preview-mode {
  background-image: none;
}

.canvas-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #666;
  text-align: center;
  pointer-events: none;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.placeholder-content svg {
  opacity: 0.5;
}

.placeholder-content p {
  font-size: 16px;
  margin: 0;
}

/* 画布元素 */
.canvas-element {
  position: absolute;
  min-width: 24px;
  min-height: 24px;
  user-select: none;
  cursor: pointer;
}

.canvas-element:hover {
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.5);
}

.canvas-element.selected {
  box-shadow: 0 0 18px rgba(88, 166, 255, 0.8);
}

.element-controls {
  position: absolute;
  top: -40px;
  right: 0;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.edit-btn,
.delete-btn,
.duplicate-btn {
  background: #58a6ff;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s ease;
}

.edit-btn:hover {
  background: #4493e0;
}

.delete-btn {
  background: #f85149;
}

.delete-btn:hover {
  background: #e5403a;
}

.duplicate-btn {
  background: #7c3aed;
}

.duplicate-btn:hover {
  background: #6d28d9;
}

.editable-content {
  outline: none;
  min-width: 24px;
  min-height: 20px;
  display: block;
  width: 100%;
  height: 100%;
}

.editable-content:focus {
  background-color: rgba(88, 166, 255, 0.1);
}

/* 属性编辑面板 */
.properties-panel {
  padding: 20px;
}

.properties-panel h3 {
  margin: 0 0 18px 0;
  color: #fff;
  font-size: 16px;
}

.property-group {
  margin-bottom: 18px;
}

.property-group label {
  display: block;
  font-size: 13px;
  color: #ccc;
  margin-bottom: 6px;
}

.property-input {
  width: 100%;
  background-color: #333;
  border: 1px solid #555;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.property-input:focus {
  outline: none;
  border-color: #58a6ff;
}

.color-input {
  width: 60px;
  height: 40px;
  padding: 0;
  border: 1px solid #555;
  border-radius: 6px;
  cursor: pointer;
  background: none;
}

.tag-display {
  color: #f85149;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  background-color: #333;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
}

/* 源代码编辑区域样式 */
.source-code-group {
  margin-top: 20px;
  border-top: 1px solid #555;
  padding-top: 20px;
}

.source-code-input {
  width: 100%;
  background-color: #1e1e1e;
  border: 1px solid #555;
  color: #d4d4d4;
  padding: 12px;
  border-radius: 6px;
  font-family: 'Courier New', Monaco, monospace;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
}

.source-code-input:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

.source-code-input::placeholder {
  color: #666;
  font-style: italic;
}

.sidebar-content {
  color: white;
}

.sidebar-content h3 {
  margin-bottom: 16px;
  font-size: 18px;
}

.sidebar-content p {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.8;
}

.content-wrapper {
  color: white;
  max-width: 800px;
  margin: 0 auto;
}

.content-wrapper h1 {
  font-size: 32px;
  margin-bottom: 16px;
  text-align: center;
}

.content-wrapper>p {
  font-size: 16px;
  text-align: center;
  margin-bottom: 48px;
  opacity: 0.9;
}

.content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.card h3 {
  margin-bottom: 8px;
  color: #00ffff;
}

.card p {
  opacity: 0.8;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .home-layout {
    grid-template-columns: 180px 1fr 220px;
  }
}

@media (max-width: 768px) {
  .home-layout {
    grid-template-areas:
      "header"
      "main"
      "left"
      "right";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
  }

  .top-header {
    min-height: 80px;
  }

  .header-content {
    padding: 0 16px;
  }

  .tag-toolbar {
    min-height: 60px;
  }

  .tag-selector-container {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .toolbar-title {
    font-size: 14px;
  }

  .tag-categories {
    gap: 8px;
  }

  .el-button {
    font-size: 12px;
    padding: 6px 12px;
  }

  .tag-display-row {
    padding: 8px 16px;
  }

  .draggable-tag {
    min-width: 60px;
    padding: 8px 6px;
  }

  .draggable-tag .tag-name {
    font-size: 11px;
  }

  .draggable-tag .tag-desc {
    font-size: 9px;
  }

  .left-sidebar,
  .right-sidebar {
    border: none;
    border-top: 3px solid #00ffff;
    padding: 12px;
  }

  .right-sidebar {
    border-top: 3px solid #ffff00;
  }

  .editor-header {
    padding: 12px 16px;
    height: 50px;
  }

  .editor-header h2 {
    font-size: 16px;
  }

  .control-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  .content-cards {
    grid-template-columns: 1fr;
  }
}

/* 侧边栏控制样式 */
.sidebar-toggle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 60px;
  background: #2c3e50;
  border: 2px solid #34495e;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  color: white;
  font-size: 16px;
}

.sidebar-toggle:hover {
  background: #34495e;
  border-color: #3498db;
}

.left-toggle {
  left: 0;
  border-radius: 0 8px 8px 0;
}

.right-toggle {
  right: 0;
  border-radius: 8px 0 0 8px;
}

/* 侧边栏头部样式 */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #555;
}

.close-btn {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: #c0392b;
}

/* 拖拽手柄样式 */
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #3498db;
  cursor: col-resize;
  transition: background 0.3s ease;
  opacity: 0.3;
}

.resize-handle:hover,
.resize-handle.dragging {
  background: #2980b9;
  opacity: 1;
}

.resize-handle.left {
  left: 0;
}

.resize-handle.right {
  right: 0;
}

/* 侧边栏位置调整 */
.left-sidebar {
  position: relative;
  border-right: 1px solid #555;
}

.right-sidebar {
  position: relative;
  border-left: 1px solid #555;
}

/* 防止拖拽时选中文本 */
.resize-handle.dragging,
.resize-handle.dragging * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sidebar-toggle {
    width: 25px;
    height: 50px;
    font-size: 14px;
  }
  
  .resize-handle {
    width: 6px;
  }
}
</style>
